<template>
  <div class="Profile-job">
    <div class="Profile-job-title">
      工作信息
    </div>
    <div class="Profile-job-info">
      <div class="Profile-job-info-companyName">
        <div style="width: 100px;">公司名称</div>
        <el-input  v-model="userinfo.company" placeholder="未填写" class="editJobInfo" ></el-input>
      </div>
      <div class="Profile-job-info-positionName">
        <div style="width: 100px;">职位名称</div>
        <el-input  v-model="userinfo.poistion" placeholder="未填写"  class="editJobInfo"></el-input>
      </div>
      <div class="Profile-job-info-IndustryName">
        <div style="width: 100px;">所属行业</div>
        <el-input  v-model="userinfo.industry" placeholder="未填写"  class="editJobInfo"></el-input>
      </div>
      <div class="ProfileConfirm" v-show="showSaveButton">
        <div class="Profile-job-info-confim" style="display: flex; justify-content: center">
          <el-button  type="danger" plain @click="updateJobInfo">保存</el-button>
          <el-button  plain @click="hideSaveButton">取消</el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {updateUserInfo} from "@/api/user";

export default {
  name: "ProfileJob",
  props:["userinfo"],
  data(){
    return{
      showSaveButton:false,
    }
  },
  methods:{
    show(){
      var name= document.getElementsByClassName("editJobInfo")
      for (var i=0;i<name.length;i++){
        name[i].onclick=()=>{
          this.showSaveButton=true;
        }
      }


    },
    hideSaveButton(){
      this.showSaveButton=false;
      location.reload();
    },
    updateJobInfo(){
      updateUserInfo(this.userinfo);
      this.showSaveButton=false;
    }
  },
  mounted() {
    this.show();
  },
}
</script>

<style >
.Profile-job{
  width: 100%;
  height: fit-content;
}
.Profile-job-title{
  font-size: 18px;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
}
.Profile-job-info{
  width: 100%;
  height: 100%;
  padding: 16px 58px 16px 15px;
  display: flex;
  flex-direction: column;
}
.Profile-job-info > div{
  height: fit-content;
  display: flex;
  align-content: center;
  font-size: small;
  margin-top: 20px;
}
.Profile-job-info > div >div{
  line-height: 50px;
}
.Profile-job-info .el-input__inner{
  width: 300px;
  margin-left: 10px;
  border:none ;
}
.ProfileConfirm{
  width: 100%;
  height: fit-content;
  justify-content: center;
}

</style>